import React, { useMemo, useState } from 'react'
import styles from '../css/query.module.css'
import { ClockCircleOutline,BillOutline } from 'antd-mobile-icons'
import { Selector } from 'antd-mobile'
import { useSearchParams } from 'react-router-dom'

const TicketFooter = () => {
    const [sp,setSP]=useSearchParams()
    const [options] =useState([
        {
            label: <ClockCircleOutline />,
            value: 'isDesc',
            description: '出发 早→晚',
        },
        {
            label: <span className='iconfont icon-gaotie'></span>,
            value: 'isSpeed',
            description: '只看高铁动车',
        },
        {
            label: <BillOutline />,
            value: 'isSeat',
            description: '只看有票',
        },
    ])


    const onSelectorChange=(value)=>{
        console.log(value);
     if(value.includes('isDesc')){
        options[0].description= '耗时 短→长'
     }else{
        options[0].description= '出发 早→晚'
     }



        
      const arr=['isDesc','isSpeed','isSeat']
      const temp={}
      arr.forEach((item)=>{
        console.log(item);
        if(value.includes(item)){
            temp[item]=true
        }else{
            temp[item]=false
        }
      })
      setSP({...Object.fromEntries(sp),...temp})
    }


    const dv=useMemo(()=>{
    const arr=['isSpeed','isSeat','isDesc']
    const temp=[]

    arr.forEach(item =>{
        if(sp.get(item) === 'true'){
            temp.push(item)
        }
    })
  
    if(sp.get('isDESC') === 'true'){
        options[0].description = '耗时 短→长'
    }


    return temp
    },[sp])
    return (
        <div className={styles.footerBox}>
            <Selector
                columns={3}
                options={options}
                defaultValue={[dv]}
                multiple
                onChange={onSelectorChange}
            />
        </div>
    )
}

export default TicketFooter
